<script setup>
import { More, Clock, Document, Picture, VideoCamera, Microphone, Location, User, PriceTag, FolderOpened } from "@element-plus/icons-vue"
import { computed } from 'vue'
import { useNote } from '@/stores/note';
import dayjs from 'dayjs'
import cos from '@/hook/useCos.js'
import EditImgs from './EditImgs.vue'
import EditVideos from "./EditVideos.vue"
import EditFiles from './EditFiles.vue'
import EditMap from './EditMap.vue'
import EditPeople from "./EditPeople.vue"
import EditTags from "./EditTags.vue"
import EditInfo from "./EditInfo.vue"


// 修改的源note，编辑模式的修改方法
const props = defineProps(['note', 'setEdit'])
const Note = useNote()

const isLoadRls = ref(false)
const uploadInfo = ref({ percent: 0, speed: 0 }) // 上传进度条
const rawNote = reactive(JSON.parse(JSON.stringify(props.note))) // 复制
const editNote = reactive({}) // 编辑项

// 返回editNote是否有某个键 有返回true
const isHaveItem = computed(() => name => Object.keys(editNote).indexOf('note' + name) > -1)

// 点击上面按钮，添加修改项到editNote
const addItem = (name) => {
  let aName = 'note' + name
  if (!isHaveItem.value(name)) {
    if (name == 'Time') editNote.noteTime = dayjs(rawNote.noteTime).format('YYYY-MM-DD HH:mm:ss')
    else editNote[aName] = rawNote[aName] ?? []
  }
  else delete editNote[aName]
}

// 点击更新按钮
const updateBtn = () => {
  isLoadRls.value = true // 更新按钮开始转

  if (Object.keys(editNote).length) {  // editNote有键值对
    editNote.noteId = props.note.noteId  // 放入要修改的noteid
    Note.updateNote(editNote, () => props.setEdit(false), uploadInfo)

    return;

  } else { // 没有数据直接取消编辑
    props.setEdit(false)
  }

}
</script>

<template>
  <!-- Model内的编辑模块 -->
  <div class="editMdoel">
    <!-- {{ editNote }} -->

    <!-- 添加上传项图标 -->
    <div class="icons">
      <Document class="icon" :class="isHaveItem('Content') && 'icon-selected'" @click="addItem('Content')" />
      <Clock class="icon" :class="isHaveItem('Time') && 'icon-selected'" @click="addItem('Time')" />
      <Picture class="icon" :class="isHaveItem('Imgs') && 'icon-selected'" @click="addItem('Imgs')" />
      <VideoCamera class="icon" :class="isHaveItem('Videos') && 'icon-selected'" @click="addItem('Videos')" />
      <Microphone class="icon" :class="isHaveItem('Audios') && 'icon-selected'" @click="addItem('Audios')" />
      <FolderOpened class="icon" :class="isHaveItem('Files') && 'icon-selected'" @click="addItem('Files')" />
      <Location class="icon" :class="isHaveItem('Location') && 'icon-selected'" @click="addItem('Location')" />
      <User class="icon" :class="isHaveItem('People') && 'icon-selected'" @click="addItem('People')" />
      <PriceTag class="icon" :class="isHaveItem('Tags') && 'icon-selected'" @click="addItem('Tags')" />
      <More class="icon" :class="isHaveItem('Info') && 'icon-selected'" @click="addItem('Info')" />

      <!-- 更新按钮 -->
      <el-button type="primary" size="small" @click="updateBtn" style="float: right" :loading="isLoadRls">更新</el-button>

    </div>

    <el-progress v-if="isLoadRls" :percentage="uploadInfo.percent"
      :format="() => uploadInfo.percent + '% ' + uploadInfo.speed + 'Mb/s'" />

    <div class="items">
      <el-input v-if="isHaveItem('Content')" v-model="editNote.noteContent" autosize type="textarea"
        placeholder="你把这条日记直接删了得了" style="margin-bottom: 5px;" />
      <el-date-picker v-if="editNote.noteTime" v-model="editNote.noteTime" type="datetime" :editable="false"
        :clearable="false" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm:ss" />
      <EditImgs v-if="editNote.noteImgs" :editNote="editNote" haveCover :setIsLoad="a => isLoadRls = a" />
      <EditVideos v-if="editNote.noteVideos" :editNote="editNote" haveCover />
      <EditFiles v-if="editNote.noteFiles" :editNote="editNote" haveCover />
      <EditMap v-if="editNote.noteLocation" :note="editNote" />
      <EditPeople v-if="editNote.notePeople" :note="editNote" />
      <EditTags v-if="editNote.noteTags" :note="editNote" />
      <EditInfo v-if="editNote.noteInfo" :note="editNote" />
    </div>

  </div>
</template>

<style scoped lang="less">
.editMdoel {
  border-radius: 5px;
  margin-top: 5px;
  padding: 5px;
  border: 1px dashed var(--el-border-color-light);

  .icon {
    margin-right: 5px;
    height: 23px;
    color: var(--el-text-color-primary);
  }

  .icon-selected {
    color: var(--el-color-primary);
  }

  .items>* {
    margin-top: 5px;
  }

  // 编辑不可操作时，如上传中
  .disabled {
    pointer-events: none;
  }
}
</style>